<script lang="ts">
export default {
  name: "PieRadius"
};
</script>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onMounted, nextTick, ref, PropType, watch } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
// import { useAppStoreHook } from "/@/store/modules/app";
import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

import { DataProps } from "./types";

const props = defineProps({
  echartData: {
    type: Array as PropType<DataProps[]>,
    default: () => []
  }
});
// const pureApp = useAppStoreHook();

const pieRadius = ref<HTMLElement | null>(null) as any;
const chart = ref<HTMLElement | null>(null) as any;

let echartInstance: ECharts;

function initechartInstance(data) {
  const echartDom = chart.value;
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  const xArr = data.map(item => item.name);

  echartInstance.setOption({
    // color: ["#00e6ad", "#59a0ff", "#ffc500"],
    color: ["#FAB05D", "#FFE58F", "#BAE637", "#85A5FF", "#FFC069", "#B5F5EC"],
    tooltip: {
      trigger: "item",
      confine: true
    },
    label: {
      show: true,
      position: "top"
    },
    grid: {
      right: 0,
      bottom: 46
    },
    // legend: {
    //   orient: "vertical",
    //   right: true
    // },
    // legend: {
    //   top: "5%",
    //   left: "center"
    // },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          interval: 0,
          width: "30",
          overflow: "break"
        },
        data: xArr
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: [
      {
        name: "",
        type: "bar",
        barWidth: 12,
        // label: {
        //   // formatter: "{name|{b}}\n{time|{c} ({d}%)} ",
        //   formatter: "{b} {c} ({d}%)",
        //   width: "100",
        //   overflow: "break"

        //   // rich: {
        //   //   time: {
        //   //     fontSize: 12
        //   //   }
        //   // }
        // },
        radius: ["30%", "46%"],
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  });
}

watch(
  () => props.echartData,
  newVal => {
    initechartInstance(newVal);
  }
);

onMounted(() => {
  nextTick(() => {
    addResizeListener(pieRadius.value, resetRender);
    // useEventListener("resize", () => {
    //   resetRender();
    // });
  });
});

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(pieRadius.value, resetRender);
});
</script>

<template>
  <div ref="pieRadius" style="height: 100%">
    <!-- <div class="title">
      <slot> </slot>
    </div> -->
    <div ref="chart" class="pieRadius"></div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  color: $defaultColor;
  margin: 10px 0;
  height: 24px;
}
.pieRadius {
  width: 100%;
  height: 300px;
}
</style>
